<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框练习</title>
		<!-- 1.画一个圆形
		     2.画一个正三角形
		思路1：   html   div元素
			     css    倒角，必须有边框
		思路2：   html   div元素  #triangle	
			     css    斜边
				        不设置宽高
						左边框：50像素实线红色   transparent
						右边框：50像素实线黄色
						下边框：50像素实线蓝色，透明度  .3
		 -->
		 <style>
			#circle{
				width: 200px;
				height: 200px;
				border: 1px solid yellow;
				border-radius: 50%;
				/*边框阴影属性 box-shadow属性 */
				box-shadow: 5px 5px 100px 5px saddlebrown inset;
			}
			 /* 2.正三角形 */
			#triangle{
				width: 0;
			/* 	 border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid rgba(0,0,225,.3); */
				/* 两行 :全部设置为透明色，上面的三角设置颜色*/
				 border :50px solid transparent;
				border-top-color:rgba(0,0,225,3); 
			}
			 input{
				outline: 1px solid red;
				  outline: 0; /*去掉边框效果，通配选择器中 */
			} 
		 </style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		文本框：<input type="text" />
		<div>
				<img src="img/p_small_001.jpg" alt="" />
		</div>
	</body>
</html>